<template>
	<view class="container">
		<view class="card">
			<view class="header">
				<text class="title">{{ baoxiao.name || '未命名报销单' }}</text>
				<text class="status" :class="statusClass">{{ baoxiao.state }}</text>
			</view>
			
			<view class="section">
				<view class="info-item">
					<text class="label">公司：</text>
					<text class="value">{{ baoxiao.company || '--' }}</text>
				</view>
				<view class="info-item">
					<text class="label">产品：</text>
					<text class="value">{{ baoxiao.product_id || '--' }}</text>
				</view>
				<view class="info-item">
					<text class="label">费用日期：</text>
					<text class="value">{{ baoxiao.date || '--' }}</text>
				</view>
				<view class="info-item">
					<text class="label">员工：</text>
					<text class="value">{{ baoxiao.employee || '--' }}</text>
				</view>
				<view class="info-item">
					<text class="label">支付方式：</text>
					<text class="value">{{ baoxiao.payment_mode || '--' }}</text>
				</view>
				<view class="info-item">
					<text class="label">账户：</text>
					<text class="value">{{ baoxiao.account_id || '--' }}</text>
				</view>
				<view class="info-item" v-if="baoxiao.work_repair_id">
					<text class="label">维修单号：</text>
					<text class="value">{{ baoxiao.work_repair_id || '--' }}</text>
				</view>
				<view class="info-item">
					<text class="label">单价：</text>
					<text class="value">¥{{ baoxiao.unit_amount || 0 }}</text>
				</view>
				<view class="info-item">
					<text class="label">数量：</text>
					<text class="value">{{ baoxiao.quantity || 0 }}</text>
				</view>
			</view>
			
			<view class="section">
				<view class="section-title">费用明细</view>
				<view v-if="baoxiao.expense_line_list && baoxiao.expense_line_list.length > 0">
					<view class="expense-item" v-for="(item, index) in baoxiao.expense_line_list" :key="index">
						<view class="expense-header">
							<text class="expense-name">{{ item.name || '未命名项目' }}</text>
							<text class="expense-type">{{ item.type || '--' }}</text>
						</view>
						<view class="expense-note" v-if="item.note">
							<text class="note-label">说明：</text>
							<text class="note-content">{{ item.note }}</text>
						</view>
						<view class="expense-footer">
							<text class="expense-amount">¥{{ item.amount || 0 }}</text>
						</view>
					</view>
				</view>
				<view v-else class="empty-tip">
					暂无费用明细
				</view>
			</view>
			
			<view class="amount-section">
				<view class="amount-row">
					<text class="amount-label">有发票金额：</text>
					<text class="amount-value">¥{{ baoxiao.amount_invoiced || 0 }}</text>
				</view>
				<view class="amount-row">
					<text class="amount-label">无发票金额：</text>
					<text class="amount-value">¥{{ baoxiao.amount_noinvoice || 0 }}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import { getBaoxiaoMessage } from '@/api/baoxiao.js'

	const recid = ref('')
	const baoxiao = ref({
		expense_line_list: [],
		amount_invoiced: 0,
		amount_noinvoice: 0
	})


	// 状态样式
	const statusClass = computed(() => {
		return {
			'pending': baoxiao.value.state === '待提交',
			'approved': baoxiao.value.state === '已批准',
			'rejected': baoxiao.value.state === '已拒绝'
		}
	})

	const _getBaoxiaoMessage = () => {
		getBaoxiaoMessage(recid.value).then((res) => {
			console.log('报销单详情', res)
			if (res) {
				baoxiao.value = res
				// 确保expense_line_list存在
				if (!baoxiao.value.expense_line_list) {
					baoxiao.value.expense_line_list = []
				}
			}
		}).catch(err => {
			console.error('获取报销单详情失败:', err)
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			})
		})
	}


	onLoad((option) => {
		if (option && option.id) {
			recid.value = option.id
			_getBaoxiaoMessage()
		} else {
			uni.showToast({
				title: '参数错误',
				icon: 'none'
			})
			uni.navigateBack()
		}
	})
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.card {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #eee;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	flex: 1;
	margin-right: 20rpx;
}

.status {
	font-size: 28rpx;
	padding: 6rpx 20rpx;
	border-radius: 20rpx;
	flex-shrink: 0;
	
	&.pending {
		color: #ff9900;
		background-color: #fff8e6;
	}
	&.approved {
		color: #07c160;
		background-color: #e6f8ee;
	}
	&.rejected {
		color: #ff0000;
		background-color: #ffeeee;
	}
}

.section {
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-bottom: 10rpx;
	border-bottom: 1rpx solid #eee;
}

.info-item {
	display: flex;
	margin-bottom: 20rpx;
	font-size: 28rpx;
}

.label {
	color: #999;
	width: 160rpx;
	flex-shrink: 0;
}

.value {
	color: #666;
	flex: 1;
	word-break: break-all;
}

.expense-item {
	padding: 20rpx 0;
	border-bottom: 1rpx dashed #eee;
}

.expense-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
}

.expense-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	flex: 1;
}

.expense-type {
	font-size: 26rpx;
	color: #666;
	background-color: #f0f0f0;
	padding: 2rpx 10rpx;
	border-radius: 4rpx;
	margin-left: 15rpx;
}

.expense-note {
	display: flex;
	font-size: 26rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.note-label {
	margin-right: 10rpx;
}

.expense-footer {
	display: flex;
	justify-content: flex-end;
}

.expense-amount {
	font-size: 28rpx;
	color: #ff5500;
	font-weight: bold;
}

.empty-tip {
	text-align: center;
	color: #999;
	font-size: 28rpx;
	padding: 30rpx 0;
}

.amount-section {
	background-color: #f9f9f9;
	border-radius: 8rpx;
	padding: 20rpx;
	margin-top: 30rpx;
}

.amount-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15rpx;
	font-size: 28rpx;
	
	&.total {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
		font-weight: bold;
		color: #333;
	}
}

.amount-label {
	color: #666;
}

.amount-value {
	color: #ff5500;
}

.action-buttons {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
	
	.btn {
		flex: 1;
		margin: 0 10rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 80rpx;
		line-height: 80rpx;
		
		&.submit {
			background-color: #2979ff;
			color: #fff;
		}
		
		&.edit {
			background-color: #fff;
			color: #2979ff;
			border: 1rpx solid #2979ff;
		}
	}
}
</style>